<template>
  <div>
    <el-dialog
      title="关联安装点"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form :model="addForm" :rules="rules" ref="refForm" label-width="80px">
        <el-form-item size="small" label="建筑物" prop="buildId">
          <el-select
            filterable
            v-model="addForm.buildId"
            placeholder="请选择"
            style="width: 100%"
            @change="changeBuild"
            v-loadMore="loadMore"
          >
            <el-option
              v-for="item in buildList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
            <div
              class="div_box"
              v-loading="loading"
              :style="loading ? '' : 'display: none;'"
            ></div>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="楼层" prop="floorId">
          <el-select
            filterable
            v-model="addForm.floorId"
            placeholder="请选择"
            style="width: 100%"
            @change="changeFloor"
            v-loadMore="loadMore2"
          >
            <el-option
              v-for="item in floorList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
            <div
              class="div_box"
              v-loading="loading2"
              :style="loading2 ? '' : 'display: none;'"
            ></div>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="安装点" prop="spaceId" v-if="flag">
          <el-select
            filterable
            v-model="addForm.spaceId"
            placeholder="请选择"
            style="width: 100%"
            v-loadMore="loadMore3"
          >
            <el-option
              v-for="item in spaceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
            <div
              class="div_box"
              v-loading="loading3"
              :style="loading3 ? '' : 'display: none;'"
            ></div>
          </el-select>
        </el-form-item>

        <el-form-item size="small" label="级别" prop="level">
          <el-select
            v-model="addForm.level"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in levelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <div class="tip">
          <div class="title"><span style="color: red">* </span>温馨提示：</div>
          <span class="txt"
            >1.若只选择建筑物，则默认添加该建筑物下所有安装点。</span
          >
          <span class="txt"
            >2.若选择到楼层，则默认添加该楼层下所有安装点。</span
          >
          <span class="txt"
            >3.当一级接警人全部没有接听电话的情况下，会发送给二级接警人，以此类推</span
          >
          <span class="txt"
            >4.二，三，四级接警人只能接收到电话短信通知，没有公众号推送。</span
          >
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="mini"
          @click="submit"
          v-preventReClick="1000"
          class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqSpaceManager, reqSpaceReceiverAdd } from "@/api/api";
import { mapState } from "vuex";
import loadMore from "@mixin/loadMore";

export default {
  props: {
    receiverInfo: {
      type: Object,
      default: () => {},
    },
  },
  mixins: [loadMore],
  data() {
    return {
      flag: false,
      dialogVisible: false,
      parkList: [],
      buildList: [],
      floorList: [],
      spaceList: [],
      addForm: {
        buildId: "",
        floorId: "",
        spaceId: "",
        level: 1,
      },
      levelList: [
        {
          id: 1,
          name: "一级",
        },
        {
          id: 2,
          name: "二级",
        },
        {
          id: 3,
          name: "三级",
        },
        {
          id: 4,
          name: "四级",
        },
      ],
      // 表单验证规则
      rules: {
        buildId: [
          {
            required: true,
            message: "请选择建筑物",
            trigger: "change",
          },
        ],
        level: [
          {
            required: true,
            message: "请选择级别",
            trigger: "change",
          },
        ],
        // floorId: [
        //   {
        //     required: true,
        //     message: "请选择楼层",
        //     trigger: "change",
        //   },
        // ],
        // spaceId: [
        //   {
        //     required: true,
        //     message: "请选择安装点",
        //     trigger: "change",
        //   },
        // ],
      },
      sysInstanceIndex: 1,
      sysInstanceTotalPages: 10,
      sysInstanceIndex2: 1,
      sysInstanceTotalPages2: 10,
      sysInstanceIndex3: 1,
      sysInstanceTotalPages3: 10,
      loading: false,
      loading2: false,
      loading3: false,
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {
    // receiverInfo(val) {
    //   this.getBuildList();
    // },
  },
  methods: {
    async loadMore() {
      if (this.sysInstanceIndex >= Math.ceil(this.sysInstanceTotalPages / 10))
        return;
      this.sysInstanceIndex++;
      this.loading = true;
      // 获取列表数据的方法
      await this.getBuildList();
      this.loading = false;
    },
    // 获取建筑物列表
    async getBuildList() {
      let res = await reqSpaceManager(this.sysInstanceIndex, 10, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.receiverInfo.orgId,
        metaCode: 1,
        isStatistics: 0,
        include: 1, //是否包含下级0包含 1不包含
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages = res.data.total;
      this.buildList = [...this.buildList, ...res.data.rows];
    },
    // 选择建筑物
    changeBuild() {
      this.sysInstanceIndex2 = 1;
      this.sysInstanceTotalPages2 = 10;
      this.sysInstanceIndex3 = 1;
      this.sysInstanceTotalPages3 = 10;
      this.getFloorList();
      this.floorList = this.spaceList = [];
      this.addForm.floorId = this.addForm.spaceId = "";
    },

    async loadMore2() {
      if (this.sysInstanceIndex2 >= Math.ceil(this.sysInstanceTotalPages2 / 10))
        return;
      this.sysInstanceIndex2++;
      this.loading2 = true;
      // 获取列表数据的方法
      await this.getFloorList();
      this.loading2 = false;
    },
    // 获取楼层列表
    async getFloorList() {
      let res = await reqSpaceManager(this.sysInstanceIndex2, 10, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.receiverInfo.orgId,
        parentId: this.addForm.buildId,
        metaCode: 2,
        isStatistics: 0,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages2 = res.data.total;
      this.floorList = [...this.floorList, ...res.data.rows];
    },
    // 选择楼层
    changeFloor() {
      this.sysInstanceIndex3 = 1;
      this.sysInstanceTotalPages3 = 10;
      this.flag = true;
      this.getSpaceList();
      this.spaceList = [];
      this.addForm.spaceId = "";
    },

    async loadMore3() {
      if (this.sysInstanceIndex3 >= Math.ceil(this.sysInstanceTotalPages3 / 10))
        return;
      this.sysInstanceIndex3++;
      this.loading3 = true;
      // 获取列表数据的方法
      await this.getSpaceList();
      this.loading3 = false;
    },
    // 获取安装点列表
    async getSpaceList() {
      let res = await reqSpaceManager(this.sysInstanceIndex3, 10, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.receiverInfo.orgId,
        parentId: this.addForm.floorId,
        metaCode: 3,
        isStatistics: 0,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages3 = res.data.total;
      this.spaceList = [...this.spaceList, ...res.data.rows];
    },
    // 点击确定
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        if (!valid) return;
        // console.log(this.receiverInfo);
        let { buildId, floorId, spaceId, level } = this.addForm;
        spaceId = spaceId ? spaceId : floorId ? floorId : buildId;
        let params = {
          id: this.receiverInfo.id,
          spaceId,
          level,
        };
        this.reqAddFun(params);
      });
    },
    // 接口请求
    async reqAddFun(params) {
      const res = await reqSpaceReceiverAdd(params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("成功");
      this.closeDialog();
      setTimeout(()=>{
        this.$parent.getDataList();
      },500)
    },
    // 点击关闭弹框
    closeDialog() {
      this.flag = false;
      this.buildList = [];
      this.floorList = [];
      this.spaceList = [];
      this.sysInstanceIndex = 1;
      this.sysInstanceTotalPages = 10;
      this.sysInstanceIndex2 = 1;
      this.sysInstanceTotalPages2 = 10;
      this.sysInstanceIndex3 = 1;
      this.sysInstanceTotalPages3 = 10;
      this.$refs.refForm.resetFields();
      this.dialogVisible = false;
    },
  },
  deactivated() {
    if (this.$refs.refForm != null) {
      this.closeDialog();
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../../common.less");

.tip {
  width: 98%;
  margin-left: 10px;
  display: flex;
  flex-direction: column;

  .title {
    color: @primaryTxtcolor;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .txt {
    width: 96%;
    font-size: 11px;
    // color: @primaryTxtcolor;
    color: #999;
    line-height: 24px;
    margin-left: 10px;
  }
}

// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 9999;
  // background: red;
  // opacity: 0.5;
}

::v-deep .el-loading-mask {
  border-radius: 4px;
}

// 下拉框加载结束
</style>
